<template>
  <div>
    <h1>Child1</h1>
    {{ toy }}
    数量:{{ count }}
    <button @click="updateFather($parent)">修改父亲</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
function updateFather(parent: any) {
  parent.house -= 1;
}
const toy = ref("car");
let count = ref(6);
// 这里的 toy 变量是通过 defineExpose 公开的
// 这样就可以在父组件中通过 $refs.child1.toy 访问到 toy 变量
//暴露给父组件的变量
defineExpose({
  toy,
  count,
});
</script>

<style scoped></style>
